<template>
  <div class="department">
    <div class="top">
      <div class="top_left">
        <selectTool
          :colmuns="headerConfig"
          :model-form="configData"
          @onFormChange="getGoodsList"
        ></selectTool>
      </div>
      <div class="right">
        <el-button
          type="primary"
          @click="openDialog"
          v-permission="'goods:saveOrUpdate'"
          >添加商品</el-button
        >
      </div>
    </div>
    <div class="content">
      <div class="content_item" v-for="item in tableList">
        <el-card style="width: 100%" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>{{ item.goods_name }}</span>
              <spana
                ><el-button
                  type="primary"
                  size="small"
                  text
                  bg
                  v-permission="'goods:saveOrUpdate'"
                  @click="go(item, 'edit')"
                  >修改</el-button
                ><el-button
                  type="danger"
                  size="small"
                  text
                  bg
                  v-permission="'goods:delete'"
                  @click="go(item, 'delete')"
                  >删除</el-button
                ></spana
              >
            </div>
          </template>
          <div class="item_img" @click="openCard(item.goods_id)">
            <img :src="codeImg" alt="" />
          </div>
        </el-card>
      </div>
    </div>
    <div class="footer">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @prev-click="prev"
        @change="sizeChange"
        @next-click="next"
      />
    </div>
  </div>

  <el-dialog v-model="dialogVisible" title="添加商品" width="500">
    <div style="padding: 10px">
      <el-form
        label-width="80px"
        :model="addData"
        :rules="addDataRules"
        ref="addDataRef"
      >
        <el-form-item label="商品名称" prop="goods_name">
          <el-input
            v-model="addData.goods_name"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品品牌" prop="goods_brand">
          <el-input
            v-model="addData.goods_brand"
            placeholder="请输入商品品牌"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品质量" prop="goods_quality">
          <el-input
            v-model="addData.goods_quality"
            placeholder="请输入商品质量"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品类型" prop="goods_type">
          <el-input
            v-model="addData.goods_type"
            placeholder="请输入商品类型"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品单位" prop="goods_unit">
          <el-input
            v-model="addData.goods_unit"
            placeholder="请输入商品单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="goods_img">
          <el-input
            v-model="addData.goods_img"
            placeholder="请输入商品图片"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="add(addDataRef)"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="goodCard" :title="cardInfo.name" width="300" align-center>
    <div class="card_item">品牌：{{ cardInfo.brand }}</div>
    <div class="card_item">类型：{{ cardInfo.type }}</div>
    <div class="card_item">质量：{{ cardInfo.quality }}</div>
    <div class="card_item">单位：{{ cardInfo.unit }}</div>
  </el-dialog>
</template>

<script lang="ts" setup>
import {
  getGoodsListApi,
  saveOrUpdateGoodsApi,
  getGoodsByIdApi,
  deleteGoodsApi,
} from "@/api/goodsApi";
import { onMounted, reactive, ref } from "vue";
import selectTool from "@/components/selectTool/index.vue";
import newTable from "@/components/newTable/index.vue";
import {
  headerConfig,
  configData,
  tableConfig,
  tableList,
  tableOptionList,
  addDataRules,
  addDataRef,
} from "./config";
import { ElMessage, type FormInstance } from "element-plus";

const codeImg = ref("https://img.picui.cn/free/2025/04/24/680a213a25eb1.jpg");
/**
 * @description 添加商品弹窗
 */
const dialogVisible = ref(false);

const goodCard = ref(false);

const cardInfo = reactive({
  name: "",
  brand: "",
  quality: "",
  type: "",
  unit: "",
});

const addType = ref("");

/**
 * @description 打开添加商品弹窗
 */
const openDialog = () => {
  dialogVisible.value = true;
  if (!addDataRef.value) return;
  addDataRef.value.resetFields([
    "goods_id",
    "goods_name",
    "goods_brand",
    "goods_quality",
    "goods_type",
    "goods_img",
    "goods_unit",
  ]);
  addType.value = "add";
};

/**
 * @description 表格操作
 */
const go = (item: any, option: String) => {
  console.log(item, option);
  switch (option) {
    case "delete":
      del(item.goods_id);
      break;
    case "edit":
      editDsepartment(item);
      break;
    default:
      break;
  }
};

/**
 * @description 添加商品数据
 */
const addData = reactive({
  goods_id: "",
  goods_name: "",
  goods_brand: "",
  goods_quality: "",
  goods_type: "",
  goods_img: "",
  goods_unit: "",
});

/**
 * @description 添加商品
 */
const add = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      saveOrUpdateGoodsApi(addData).then((res: any) => {
        dialogVisible.value = false;
        getGoodsList();
        formEl.resetFields();
        if (addType.value === "edit") {
          ElMessage.success("修改成功");
        } else {
          ElMessage.success("添加成功");
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const editDsepartment = (item: any) => {
  console.log("编辑", item);
  addType.value = "edit";
  dialogVisible.value = true;
  addData.goods_id = item.goods_id;
  addData.goods_name = item.goods_name;
  addData.goods_brand = item.goods_brand;
  addData.goods_quality = item.goods_quality;
  addData.goods_type = item.goods_type;
  addData.goods_img = item.goods_img;
  addData.goods_unit = item.goods_unit;
};

/**
 * @description 删除商品
 */
const del = (id: number) => {
  // console.log("删除", id);

  deleteGoodsApi(id).then((res: any) => {
    // console.log(res);
    getGoodsList();
    ElMessage.success("删除成功");
  });
};

/**
 * 商品总条数
 */
const total = ref(0);

const pageNum = ref(1);

const pageSize = ref(10);

/**
 * @description 获取商品列表
 */
const getGoodsList = () => {
  getGoodsListApi({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    goodsName: configData.value.name,
    goodsType: configData.value.type,
    goodsBrand: configData.value.brand,
  }).then((res: any) => {
    console.log(res);
    tableList.value = res.data.list;
    total.value = res.data.total;
  });
};

/**
 * @description 上一页
 */
const prev = () => {
  console.log("上一页");
  getGoodsListApi({
    pageNum: pageNum.value - 1,
    pageSize: 10,
  }).then((res: any) => {
    // console.log(res);
    tableList.value = res.data.list;
    total.value = res.data.total;
  });
};

/**
 * @description 下一页
 */
const next = () => {
  console.log("下一页");
  getGoodsListApi({
    pageNum: pageNum.value + 1,
    pageSize: 10,
  }).then((res: any) => {
    tableList.value = res.data.list;
    total.value = res.data.total;
  });
};

/**
 * @description 每页显示条数
 */
const sizeChange = (val: number) => {
  console.log(val);
  pageNum.value = val;
  getGoodsListApi({
    pageNum: pageNum.value,
    pageSize: 10,
  }).then((res: any) => {
    // console.log(res);
    tableList.value = res.data.list;
    total.value = res.data.total;
  });
};

const openCard = (id: number) => {
  getGoodsByIdApi(id).then((res) => {
    // console.log("单个商品", res);
    goodCard.value = true;
    cardInfo.name = res.data.goods_name;
    cardInfo.brand = res.data.goods_brand;
    cardInfo.type = res.data.goods_type;
    cardInfo.quality = res.data.goods_quality;
    cardInfo.unit = res.data.goods_unit;
  });
};

onMounted(() => {
  getGoodsList();
});
</script>

<style>
.department {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 15px;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px 0 0;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1); /* 阴影 */
  margin-bottom: 10px;
  flex: 0 0 auto;
  overflow: auto;
}

.content {
  height: 100%;
  display: flex;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  justify-content: start;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1); /* 阴影 */
  flex: 1 1 auto;
  overflow: auto;
  flex-wrap: wrap;
  padding: 10px;
  .content_item {
    width: 24%;
    padding: 6px;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .item_img {
      img {
        height: 100%;
        width: 100%;
      }
    }
  }
}

.card_item {
  margin-bottom: 10px;
}

.footer {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1); /* 阴影 */
  height: 60px;
  flex: 0 0 auto;
}
</style>
